<template>
  <div id="box">
    <div id="headformclass">
      <el-form :inline="true" :model="data" class="demo-form-inline">
        <el-form-item label="">
          <el-select v-model="data.courseid" placeholder="请选择课程名称">
            <el-option
              v-for="(v, i) in coursenamearr"
              :label="v.name"
              :value="v.id"
              :key="i"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-select v-model="data.coachid" placeholder="请选择课程教练">
            <el-option
              v-for="(v, i) in coacharr"
              :label="v.name"
              :value="v.id"
              :key="i"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchbtn">查询</el-button>
          <el-button size="medium" @click="addalert = true">添加排期</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div id="leagueclasstable">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="课程列表">
            <el-table-column prop="coachName" label="课程名称" width="100">
            </el-table-column>
            <el-table-column prop="name" label="教练" width="100">
            </el-table-column>
            <el-table-column prop="vname" label="场馆"> </el-table-column>
            <!-- <el-table-column prop="spaceName" label="场地"> </el-table-column> -->
            <el-table-column
              prop="start_time"
              label="开始时间"
              :formatter="formatDate1"
              width="160"
            >
            </el-table-column>
            <el-table-column
              prop="end_time"
              label="结束时间"
              :formatter="formatDate2"
              width="160"
            >
            </el-table-column>
            <el-table-column prop="peoples" label="预约人数"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <!-- (scope.row) -->
                <el-button
                  @click="editbtn(scope.$index, scope.row)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
                <el-button type="text" size="small" @click="open(scope)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!--添加排期弹框-->
    <el-dialog title="添加排期" :visible.sync="addalert">
      <el-form :model="data">
        <el-form-item label="课程名称:" :label-width="'100'">
          <div id="adddiv">
            <el-select v-model="data.addname" placeholder="请选择活动区域">
              <el-option
                v-for="(v, i) in coursenamearr"
                :label="v.name"
                :value="v.id"
                :key="i"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="教练：" :label-width="'100'">
          <div id="adddiv" class="adddiv">
            <el-select v-model="data.addcoach" placeholder="请选择活动区域">
              <el-option
                v-for="(v, i) in coacharr"
                :label="v.name"
                :value="v.id"
                :key="i"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="场馆：" :label-width="'100'">
          <div id="adddiv" class="adddiv">
            <el-select v-model="data.addvenue" placeholder="请选择活动区域">
              <el-option
                v-for="(v, i) in venuearr"
                :label="v.name"
                :value="v.id"
                :key="i"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <!-- <el-form-item label="场地：" :label-width="'100'">
          <div id="adddiv" class="adddiv">
            <el-select v-model="data.addfield" placeholder="请选择活动区域">
              <el-option
                v-for="(v, i) in locationarr"
                :label="v.spaceName"
                :value="v.id"
                :key="i"
              ></el-option>
            </el-select>
          </div>
        </el-form-item> -->

        <div id="addbegin" class="block">
          <span class="demonstration">开始时间：</span>
          <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>

        <div id="addenddiv" class="block">
          <span class="demonstration">结束时间：</span>
          <el-date-picker
            v-model="endTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addalert = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑弹框-->
    <el-dialog title="编辑排期" :visible.sync="editalert">
      <el-form :model="editTable">
        <el-form-item label="课程名称" :label-width="'100'">
          <div id="editdiv">
            <el-select
              v-model="editTable.coachName"
              placeholder="请选择活动区域"
            >
              <el-option
                v-for="(v, i) in coursenamearr"
                :label="v.name"
                :value="v.id"
                :key="i"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="教练" :label-width="'100'">
          <div id="editdiv" class="editdiv">
            <el-select v-model="editTable.name" placeholder="请选择活动区域">
              <el-option
                v-for="(v, i) in coacharr"
                :label="v.name"
                :value="v.id"
                :key="i"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="场馆" :label-width="'100'">
          <div id="editdiv" class="editdiv">
            <el-select v-model="editTable.vname" placeholder="请选择活动区域">
              <el-option
                v-for="(v, i) in venuearr"
                :label="v.name"
                :value="v.id"
                :key="i"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <!-- <el-form-item label="场地" :label-width="'100'">
          <div id="editdiv" class="editdiv">
            <el-select
              v-model="editTable.spaceName"
              placeholder="请选择活动区域"
            >
              <el-option
                v-for="(v, i) in locationarr"
                :label="v.spaceName"
                :value="v.id"
                :key="i"
              ></el-option>
            </el-select>
          </div>
        </el-form-item> -->

        <div id="edittime" class="block">
          <span class="demonstration">排期时间：</span>
          <el-date-picker
            v-model="editTable.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>

        <!-- <el-form :inline="true" :model="data" class="demo-form-inline">
          <div id="editdiv" class="editpeople">
            <el-form-item label="预约人数" :label-width="'100'">
              <el-input
                v-model="editTable.peoples"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
        </el-form> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editalert = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>

    <div id="pagefoot">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-count="size"
        @current-change="change"
        @prev-click="prev"
        @next-click="next"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      coachid: "",
      courseid: "",
      locationarr: [],
      venuearr: [],
      coacharr: [],
      coursenamearr: [],
      id: "",
      coacharr: [],
      coursenamearr: [],
      page: 1,
      size: 5,
      total: 0,
      data: {
        name: "",
        coach: "",
        venue: "",
        field: "",
        person: 0,
        addname: "",
        addcoach: "",
        addvenue: "",
        addfield: "",
        startTime: "",
        copyvenue: "",
        copyfield: "",
      },
      tableData: [],
      editTable: [],
      copyalert: false,
      addalert: false,
      editalert: false,
      startTime: "",
      endTime: "",
      valueedit: [
        new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10),
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    goBack() {
      console.log("go back");
    },
    open(v) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(v.row.id);
          this.$axios({
            url: "/gym/scheduling/delete",
            method: "post",
            dataType: "json",
            data: {
              id: v.row.id,
            },
          }).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.getCon();
              this.$message({ type: "success", message: "删除成功!" });
            } else {
              this.$message.error("删除失败!");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getCon() {
      this.$axios({
        url: "/gym/scheduling/list",
        method: "post",
        dataType: "json",
        data: {
          page: this.page,
          limit: this.size,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        // this.tableData.coachName=res.data.data.coachName;
        // this.tableData.name=res.data.data.name;
        // this.tableData.vname=res.data.data.vname;
        // this.tableData.spaceName=res.data.data.spaceName;
        // this.tableData.start_time=fTime(res.data.data.start_time);
        // this.tableData.end_time=fTime(res.data.data.end_time);
        // this.tableData.peoples=res.data.data.peoples;
        // this.total = res.data.count;
      });
    },
    change(v) {
      this.page = v;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
    edit() {
      console.log(this.editTable.time);
      this.$axios({
        url: "/gym/scheduling/update",
        method: "post",
        dataType: "json",
        data: {
          id: this.id,
          coursesId: this.editTable.coachName,
          coachId: this.editTable.name,
          venuesId: this.editTable.vname,
          //LocationId: this.editTable.spaceName,
          startTime: new Date(this.editTable.time).getTime(),
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("编辑成功！");
          this.getCon();
          this.editalert = false;
        } else {
          this.$message.error("编辑失败！");
        }
        (this.data.name = ""),
          (this.data.coach = ""),
          (this.data.venue = ""),
          (this.data.field = ""),
          (this.data.person = "");
      });
    },
    add() {
      this.$axios({
        url: "/gym/scheduling/add",
        method: "post",
        dataType: "json",
        data: {
          coursesId: this.data.addname,
          coachId: this.data.addcoach,
          venueId: this.data.addvenue,
          //LocationId: this.data.addfield,
          startTime: new Date(this.startTime).getTime(),
          endTime: new Date(this.endTime).getTime(),
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.addalert = false;
          this.$message.success("添加成功！");
          this.getCon();
        } else {
          this.$message.error("添加失败！");
        }
        (this.data.addname = ""),
        (this.data.addcoach = ""),
        (this.data.addvenue = ""),
        (this.data.addfield = "");
      });
    },
    getCoach() {
      this.$axios({
        url: "/gym/coach/all",
        method: "post",
        dataType: "json",
      }).then((res) => {
        console.log(res);
        this.coacharr = res.data.data;
      });
    },
    getcoursename() {
      this.$axios({
        url: "/gym/courses/nameList",
        method: "post",
        dataType: "json",
      }).then((res) => {
        console.log(res);
        this.coursenamearr = res.data.data;
      });
    },
    editbtn(index, row) {
      this.id = row.id;
      console.log(index, row);
      this.editalert = true;
      this.editTable = row;
    },
    getcoursename() {
      this.$axios({
        url: "/gym/courses/nameList",
        method: "post",
        dataType: "json",
      }).then((res) => {
        console.log(res);
        this.coursenamearr = res.data.data;
      });
    },
    getcoach() {
      this.$axios({
        url: "/gym/coach/all",
        method: "post",
        dataType: "json",
      }).then((res) => {
        console.log(res);
        this.coacharr = res.data.data;
      });
    },
    getvenue() {
      this.$axios({
        url: "/gym/venue/findAllVenueName",
        method: "post",
        dataType: "json",
      }).then((res) => {
        console.log(res);
        this.venuearr = res.data.data;
      });
    },
    // getlocation() {
    //   this.$axios({
    //     url: "/gym/venue/findAllSpace",
    //     method: "post",
    //     dataType: "json",
    //   }).then((res) => {
    //     console.log(res);
        
    //     for(let i=0;i<this.venuearr.length;i++){
    //       if(this.venuearr[i].name==this.editTable.vname){
    //         this.locationarr = res.data.data[i].sname;
    //       }
    //     }
    //   });
    // },
    searchbtn() {
      this.$axios({
        url: "/gym/courses/list",
        method: "post",
        dataType: "json",
        data: {
          coursesId: this.data.courseid,
          coachsId: this.data.coachid,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.$message.success("查询成功！");
        } else {
          this.$message.error("查询失败！");
        }
        this.data.coachid='';
        this.data.courseid='';
      });
    },
    formatDate1(row, column) {
      //console.log(111111111,row,column);
      var date = new Date(parseInt(row.start_time));
      let Y = date.getFullYear() + "-";
      let M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1) + "-"
          : date.getMonth() + 1 + "-";
      let D =
        date.getDate() < 10
          ? +"0" + date.getDate() + " "
          : date.getDate() + " ";
      let h =
        date.getHours() < 10
          ? "0" + date.getHours() + ":"
          : date.getHours() + ":";
      let m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    formatDate2(row, column) {
      //console.log(111111111,row,column);
      var date = new Date(parseInt(row.end_time));
      let Y = date.getFullYear() + "-";
      let M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1) + "-"
          : date.getMonth() + 1 + "-";
      let D =
        date.getDate() < 10
          ? +"0" + date.getDate() + " "
          : date.getDate() + " ";
      let h =
        date.getHours() < 10
          ? "0" + date.getHours() + ":"
          : date.getHours() + ":";
      let m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
  },
  mounted() {
    this.getCon();
    this.getCoach();
    this.getcoursename();
    this.getvenue();
    //this.getlocation();
  },
};
</script>

<style scoped>
#headformclass {
  float: left;
  margin-left: -217px;
  margin-top: 60px;
}
#clockspan {
  padding: 10px;
}
.seconddiv {
  margin-left: 70px;
}
#editdiv {
  text-align: left;
}
.editdiv {
  margin-left: 68px;
}
#adddiv {
  text-align: left;
}
.adddiv {
  margin-left: 70px;
}
#leagueclasstable {
  width: 98%;
  margin-left: 10px;
  margin-top: 20px;
}
#pagefoot {
  position: absolute;
  right: 20px;
  bottom: -20px;
  background: #eee;
}
#copyalerttime {
  margin-left: -23px;
}
#addbegin {
  margin-left: -345px;
}
#edittime {
  margin-left: -170px;
}
.editpeople {
  margin-top: 20px;
}
#addenddiv {
  margin-left: -345px;
  margin-top: 20px;
}
</style>